<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jquery的cdn-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        function sendAjax(){
            $.ajax({
                url:'http://127.0.0.1:8080/ajax2',
                dataType:'json',
                success:function(res){
                    console.log(res)
                }
            })
        }

        function sendAjax2(){
            // var data = {
            //     id:1001,
            //     username:'tom',
            //     password:'123',
            //     age:19,
            //     birthday:'2004-02-12 12:33:45'
            // }

            // var data = [2,6,9]

            // var data = [
            //     {
            //         id:1001,
            //         username:'tom',
            //         password:'123',
            //         age:19
            //     },
            //     {
            //         id:1002,
            //         username:'jack',
            //         password:'123',
            //         age:19
            //     },
            //     {
            //         id:1003,
            //         username:'alice',
            //         password:'123',
            //         age:19
            //     }
            // ]

            // var data = {uid:1001}

            // $.ajax({
            //     type:'post',
            //     url:'param6',
            //     contentType:'application/json;charset=utf8', // 指定传递数据的类型
            //     data: JSON.stringify(data), // json字符串数据
            //     dataType:'json', // 指定响应数据的类型
            //     success:function(res){
            //         console.log(res)
            //     }
            // })

            $.ajax({
                type:'put',
                url:'/path/path1/6',
                // contentType:'application/x-www-form-urlencoded',
                // data: {
                //     username:'张三',
                //     age:18
                // },
                dataType:'json', // 指定响应数据的类型
                success:function(res){
                    console.log(res)
                }
            })
        }

        function  doUpload(){
            // 文件上传时必须将数据封装为FormData
            var formData = new FormData()
            formData.append('name',$('#name').val())
            formData.append('file',$('#avatar')[0].files[0])

            $.ajax({
                type:'post', // 请求方式必须为post
                url:'upload',
                contentType: false, // 文件上传时必须为false，相当于设置为 multipart/form-data
                processData: false, // 是否将传输的数据转换为查询字符串，文件上传时必须设置为false
                data:formData,
                success:function(res){
                    console.log(res)
                }
            })
        }
    </script>
</head>
<body>
<!--<form action="" method="post" enctype="application/x-www-form-urlencoded"></form>-->

    welcome to index.html
    <hr>

    <button onclick="sendAjax()">发送Ajax请求</button>
    <hr>

    <button onclick="sendAjax2()">发送Ajax请求2</button>
    <hr>

    <form id="uploadForm" method="get" enctype="multipart/form-data">
        姓名：<input type="text" name="name" id="name"> <br>
        头像：<input type="file" name="avatar" id="avatar"> <br>
        <input type="button" value="提交" onclick="doUpload()">
    </form>

</body>
</html>